<script setup lang="ts">
import { ref, onMounted } from 'vue';

const props = defineProps<{
  text: string;
  speed?: number;
}>();

const displayText = ref('');
const currentIndex = ref(0);

const typeText = () => {
  if (currentIndex.value < props.text.length) {
    displayText.value += props.text[currentIndex.value];
    currentIndex.value++;
    setTimeout(typeText, props.speed || 100);
  }
};

onMounted(() => {
  typeText();
});
</script>

<template>
  <span class="typewriter">{{ displayText }}<span class="cursor">|</span></span>
</template>

<style scoped>
.typewriter {
  font-family: monospace;
  font-size: 1.2em;
}

.cursor {
  animation: blink 0.7s infinite;
  font-weight: bold;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
</style> 